<template>
    <div class="leftView">
        <!-- 机器人列表 -->
        <div class="robotList">
            <div class="header">
                <p>机器人列表</p>
            </div>
            <div class="bottomList">
                <div class="TBheader">
                    <p>编号</p>
                    <p>名称</p>
                    <p>状态</p>
                </div>
                <div class="TBfooter">
                    <div class="TBfooterBox" @click="changeBackground(item)"
                        :class="{ 'active': isActiveRow(item.robotName) }" v-for="item in table1" :key="item.id">
                        <p>{{ item.robotNo }}</p>
                        <p>{{ item.robotName }}</p>
                        <p v-if="item.robotStatus == 0"><img src="../../../images/wrong.png" alt=""
                                style="width:14px;height:14px;"></p>
                        <p v-if="item.robotStatus == 1"><img src="../../../images/run.png" alt=""
                                style="width:14px;height:14px;"></p>
                    </div>
                </div>
            </div>
        </div>
        <!-- 机器人运行状态 -->
        <div class="robotState">
            <div class="header">
                <p>机器人运行状态</p>
            </div>
            <div class="bottomList">
                <div class="TBheader">
                    <p>序号</p>
                    <p>名称</p>
                    <p>状态</p>
                </div>
                <div class="TBfooter">
                    <div class="TBfooterBox" :class="robotDp(BaseplateStatus)">
                        <p>1</p>
                        <p>底盘系统</p>
                        <p>
                            <span :class="getRobotDpImages(BaseplateStatus)"></span>
                        </p>
                    </div>
                    <div class="TBfooterBox" :class="robotJxb(JxbStatus)">
                        <p>2</p>
                        <p>机械臂系统</p>
                        <p>
                            <span :class="getRobotJxbImages(JxbStatus)"></span>
                        </p>
                    </div>
                    <div class="TBfooterBox" :class="robotJczz(JczzStatus)">
                        <p>3</p>
                        <p>检测装置系统</p>
                        <p>
                            <span :class="getRobotJczzImages(JczzStatus)"></span>
                        </p>
                    </div>
                    <div class="TBfooterBox" :class="robotHcl(HclStatus)">
                        <p>4</p>
                        <p>后处理系统</p>
                        <p>
                            <span :class="getRobotHclImages(HclStatus)"></span>
                        </p>
                    </div>
                    <div class="TBfooterBox" :class="robotZzcd(CdzStatus)">
                        <p>5</p>
                        <p>自助充电系统</p>
                        <p>
                            <span :class="getRobotZzcdImages(CdzStatus)"></span>
                        </p>
                    </div>
                </div>
            </div>
        </div>
        <!-- 预处理端运行状态 -->
        <div class="robotState">
            <div class="header">
                <p>预处理端运行状态</p>
            </div>
            <div class="bottomList">
                <div class="TBheader">
                    <p>编号</p>
                    <p>名称</p>
                    <p>状态</p>
                </div>
                <div class="TBfooter">
                    <div class="TBfooterBox" v-for="item in table13" :key="item.id" :class="Preyxzt(item.preStatus)">
                        <p>{{ item.poorNo }}</p>
                        <p>{{ item.preName }}</p>
                        <p>
                            <span :class="PregetyxztImages(item.preStatus)"></span>
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>

import { getRobotList,  getPreList, GetCardata } from '@/api/cyRobot/home'
export default {
    name: "LeftView",
    data() {
        return {
            timer:null,
            table1: [],
            activeRowIndex: '',
            robotCamIP: '',
            rtspUrl: '',
            table12: [],
            table13: [],
            queryparams: {
                id: localStorage.getItem('robotId')
            },
            robotId: localStorage.getItem('robotId') || '',
            BaseplateStatus: '',
            JxbStatus: '',
            JczzStatus: '',
            HclStatus: '',
            CdzStatus: '',
            //机器人运行速度
            linearX:'',
            //电量
            dcdl:'',
        }
    },
    created() {
        this.activeRowIndex = localStorage.getItem('robotName') || null
        this.RobotList()
        this.PreList()
    },
    mounted() {
        this.timer = setInterval(() => {
            this.RobotList()
            this.PreList()
            if (localStorage.getItem('robotId')) {
                this.getOperation() //获取机器人运行状态列表
            }
        }, 2000)
    },
    computed: {
        //机器人运行状态部分
        //底盘系统
        robotDp() {
            return function (BaseplateStatus) {
                if (BaseplateStatus === 'false') {
                    return 'baojing';
                } else if (BaseplateStatus === 'true') {
                    return 'yunxing'
                } else {
                    return 'zhuangtai'
                }
            }
        },
        getRobotDpImages() {
            return function (BaseplateStatus) {
                if (BaseplateStatus === 'false') {
                    return 'bjPng';
                } else if (BaseplateStatus === 'true') {
                    return 'yxPng'
                } else {
                    return 'ztPng'
                }
            }
        },
        //机械臂系统
        robotJxb() {
            return function (JxbStatus) {
                if (JxbStatus === 0) {
                    return 'baojing';
                } else if (JxbStatus === 1) {
                    return 'yunxing'
                } else {
                    return 'zhuangtai'
                }
            }
        },
        getRobotJxbImages() {
            return function (JxbStatus) {
                if (JxbStatus === 0) {
                    return 'bjPng';
                } else if (JxbStatus === 1) {
                    return 'yxPng'
                } else {
                    return 'ztPng'
                }
            }
        },
        //检测装置系统
        robotJczz() {
            return function (JczzStatus) {
                if (JczzStatus === 'false') {
                    return 'baojing';
                } else if (JczzStatus === 'true') {
                    return 'yunxing'
                } else {
                    return 'zhuangtai'
                }
            }
        },
        getRobotJczzImages() {
            return function (JczzStatus) {
                if (JczzStatus === 'false') {
                    return 'bjPng';
                } else if (JczzStatus === 'true') {
                    return 'yxPng'
                } else {
                    return 'ztPng'
                }
            }
        },
        //后处理系统
        robotHcl() {
            return function (HclStatus) {
                if (HclStatus === 'false') {
                    return 'baojing';
                } else if (HclStatus === 'true') {
                    return 'yunxing'
                } else {
                    return 'zhuangtai'
                }
            }
        },
        getRobotHclImages() {
            return function (HclStatus) {
                if (HclStatus === 'false') {
                    return 'bjPng';
                } else if (HclStatus === 'true') {
                    return 'yxPng'
                } else {
                    return 'ztPng'
                }
            }
        },
        //自助充电系统
        robotZzcd() {
            return function (CdzStatus) {
                if (CdzStatus === 'false') {
                    return 'baojing';
                } else if (CdzStatus === 'true') {
                    return 'yunxing'
                } else {
                    return 'zhuangtai'
                }
            }
        },
        getRobotZzcdImages() {
            return function (CdzStatus) {
                if (CdzStatus === 'false') {
                    return 'bjPng';
                } else if (CdzStatus === 'true') {
                    return 'yxPng'
                } else {
                    return 'ztPng'
                }
            }
        },
        //预处理列表
        Preyxzt() {
            return function (preStatus) {
                if (preStatus === '0') {
                    return 'zhuangtai';
                } else if (preStatus === '1') {
                    return 'yunxing'
                }
            }
        },
        PregetyxztImages() {
            return function (preStatus) {
                if (preStatus === '0') {
                    return 'ztPng';
                } else if (preStatus === '1') {
                    return 'yxPng'
                }
            }
        }
    },
    methods: {
        // 机器人运行状态
        getOperation() {
            GetCardata(this.queryparams).then(response => {
                this.BaseplateStatus = response.data.websocketConnect
                this.JxbStatus = this.JakaconnectConnectState(response.data.Jakaconnect)
                this.JczzStatus = response.data.connect
                this.HclStatus = response.data.connect_plc
                this.CdzStatus = response.data.websocketConnect
                this.linearX = response.data.linearX
                this.$bus.$emit('linearX', this.linearX)
                this.dcdl = response.data.soc
                this.$bus.$emit('dcdl', this.dcdl)
            });
        },
        JakaconnectConnectState(state) {
            return state ? 0 : 1;
        },
        //预处理端
        PreList() {
            getPreList().then(response => {
                this.table13 = response.rows
            })
        },
        //机器人列表
        RobotList() {
            getRobotList().then(response => {
                this.table1 = response.rows
            })
        },
        changeBackground(item) {
            this.activeRowIndex = item.robotName
            this.robotId = item.id
            localStorage.removeItem('robotCamIP')
            localStorage.setItem('robotName', item.robotName)
            localStorage.setItem('robotId', item.id)
            localStorage.setItem('robotCamIP', item.camIP)
            this.$bus.$emit('updateRobotCamIP', item.camIP)
            localStorage.setItem('selectRobotStatus',item.robotStatus)
        },
        isActiveRow(id) {
            return this.activeRowIndex === id;
        }
    },
    beforeDestroy() {
        if (this.timer) { clearInterval(this.timer); }
    }

}
</script>
<style lang="scss" scoped>
* {
    padding: 0;
    margin: 0;
}

.TBfooter::-webkit-scrollbar {
    display: none;
    /* 隐藏滚动条（仅适用于webkit内核的浏览器，如Chrome、Safari） */
}

.leftView {
    width: 30%;
    height: calc(100vh - 40px - 50px);
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;

    //机器人列表
    .robotList {
        width: 98%;
        height: 35%;

        .header {
            width: 98%;
            height: 35px;
            background-image: url(../../../images/banner.png);
            background-repeat: no-repeat;
            background-size: 100% 100%;
            display: flex;
            align-items: center;

            >p {
                font-family: PangMenZhengDao;
                font-weight: 400;
                font-size: 20px;
                color: #D9EAF5;
                margin-left: 20px;
            }
        }

        .bottomList {
            width: 100%;
            height: 80%;
            display: flex;
            flex-direction: column;
            justify-content: space-around;
            align-items: center;

            .TBheader {
                height: 30px;
                width: 100%;
                margin-top: 4px;
                display: flex;
                background-image: url(../../../images/liebiao.png);
                background-repeat: no-repeat;
                background-size: 100% 100%;

                >p {
                    width: 30%;
                    height: 30px;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    font-family: Source Han Sans CN;
                    font-weight: 500;
                    font-size: 14px;
                    color: #FFFFFF;
                }
            }

            .TBfooter {
                width: 100%;
                height: 78%;
                overflow-y: auto;

                .TBfooterBox {
                    height: 28px;
                    margin-top: 4px;
                    display: flex;
                    font-family: Source Han Sans CN;
                    font-weight: 500;
                    font-size: 12px;
                    color: #FFFFFF;
                    background-image: url(../../../images/liebiao2.png);
                    background-repeat: no-repeat;
                    background-size: 100% 100%;
                    cursor: pointer;

                    >p {
                        width: 30%;
                        height: 28px;
                        display: flex;
                        justify-content: center;
                        align-items: center;
                    }
                }

                .active {
                    background: #17A4A2;
                    border-radius: 5px;
                }
            }
        }
    }


    //机器人运行状态
    .robotState {
        width: 98%;
        height: 35%;

        //background-color: coral;
        .header {
            width: 98%;
            height: 35px;
            background-image: url(../../../images/banner.png);
            background-repeat: no-repeat;
            background-size: 100% 100%;
            display: flex;
            align-items: center;

            >p {
                font-family: PangMenZhengDao;
                font-weight: 400;
                font-size: 20px;
                color: #D9EAF5;
                margin-left: 20px;
            }
        }

        .bottomList {
            width: 100%;
            height: 80%;
            display: flex;
            flex-direction: column;
            justify-content: space-around;
            align-items: center;

            //background-color: aquamarine;
            .TBheader {
                height: 30px;
                width: 100%;
                margin-top: 4px;
                display: flex;
                background-image: url(../../../images/liebiao.png);
                background-repeat: no-repeat;
                background-size: 100% 100%;

                >p {
                    width: 30%;
                    height: 100%;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    font-family: Source Han Sans CN;
                    font-weight: 500;
                    font-size: 14px;
                    color: #FFFFFF;
                }
            }

            .TBfooter {
                width: 100%;
                height: 80%;
                overflow-y: auto;

                //background-color: burlywood;
                .baojing {
                    background-image: url(../../../images/chen.png);
                    background-repeat: no-repeat;
                    background-size: 100% 100%;
                }

                .yunxing {
                    background-image: url(../../../images/luse.png);
                    background-repeat: no-repeat;
                    background-size: 100% 100%;
                }

                .zhuangtai {
                    background-image: url(../../../images/baise.png);
                    background-repeat: no-repeat;
                    background-size: 100% 100%;
                }

                .TBfooterBox {
                    height: 28px;
                    margin-top: 4px;
                    display: flex;
                    font-family: Source Han Sans CN;
                    font-weight: 500;
                    font-size: 12px;
                    color: #FFFFFF;
                    cursor: pointer;

                    >p {
                        width: 30%;
                        display: flex;
                        justify-content: center;
                        align-items: center;
                    }

                    .bjPng {
                        width: 15px;
                        height: 15px;
                        background-image: url(../../../images/baojing.png);
                        background-repeat: no-repeat;
                        background-size: 100% 100%;
                    }

                    .yxPng {
                        width: 25px;
                        height: 12px;
                        background-image: url(../../../images/yunxin1.png);
                        background-repeat: no-repeat;
                        background-size: 100% 100%;
                    }

                    .ztPng {
                        width: 15px;
                        height: 15px;
                        background-image: url(../../../images/zhuangtai.png);
                        background-repeat: no-repeat;
                        background-size: 100% 100%;
                    }
                }
            }

        }

    }


    //预处理端运行状态
    .robotState {
        width: 98%;
        height: 30%;

        //background-color: rgb(78, 222, 65);
        .header {
            width: 98%;
            height: 35px;
            background-image: url(../../../images/banner.png);
            background-repeat: no-repeat;
            background-size: 100% 100%;
            display: flex;
            align-items: center;

            >p {
                font-family: PangMenZhengDao;
                font-weight: 400;
                font-size: 20px;
                color: #D9EAF5;
                margin-left: 20px;
            }
        }

        .bottomList {
            width: 100%;
            height: 88%;
            display: flex;
            flex-direction: column;
            justify-content: space-around;
            align-items: center;

            //background-color: rgb(250, 135, 48);
            .TBheader {
                height: 30px;
                width: 100%;
                margin-top: 4px;
                display: flex;
                background-image: url(../../../images/liebiao.png);
                background-repeat: no-repeat;
                background-size: 100% 100%;

                >p {
                    width: 30%;
                    height: 100%;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    font-family: Source Han Sans CN;
                    font-weight: 500;
                    font-size: 14px;
                    color: #FFFFFF;
                }
            }

            .TBfooter {
                width: 100%;
                height: 80%;
                overflow-y: auto;

                //background-color: aquamarine;
                .baojing {
                    background-image: url(../../../images/chen.png);
                    background-repeat: no-repeat;
                    background-size: 100% 100%;
                }

                .yunxing {
                    background-image: url(../../../images/luse.png);
                    background-repeat: no-repeat;
                    background-size: 100% 100%;
                }

                .zhuangtai {
                    background-image: url(../../../images/baise.png);
                    background-repeat: no-repeat;
                    background-size: 100% 100%;
                }

                .TBfooterBox {
                    height: 28px;
                    margin-top: 4px;
                    display: flex;
                    font-family: Source Han Sans CN;
                    font-weight: 500;
                    font-size: 12px;
                    color: #FFFFFF;
                    cursor: pointer;

                    >p {
                        width: 30%;
                        display: flex;
                        justify-content: center;
                        align-items: center;
                    }

                    .bjPng {
                        width: 15px;
                        height: 15px;
                        background-image: url(../../../images/baojing.png);
                        background-repeat: no-repeat;
                        background-size: 100% 100%;
                    }

                    .yxPng {
                        width: 25px;
                        height: 12px;
                        background-image: url(../../../images/yunxin1.png);
                        background-repeat: no-repeat;
                        background-size: 100% 100%;
                    }

                    .ztPng {
                        width: 15px;
                        height: 15px;
                        background-image: url(../../../images/zhuangtai.png);
                        background-repeat: no-repeat;
                        background-size: 100% 100%;
                    }
                }
            }

        }

    }

}
</style>
